<template>
  <div class="chart-container">
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
    <div class="description">{{props.wztext}}</div>
  </div>
  <Dialog :visible="visible"
    dataChange="4" :tableData="tableData"
    @close="visible = false" title="数据标准条数">
  </Dialog>
</template>

<script setup>
import { onMounted, watch, nextTick,ref,provide} from "vue";
import { useEcharts } from "../../../../hook/ useEcharts";
import * as echarts from "echarts";
import Dialog from '@/components/Dialog/Dialog.vue'
import {GETcountDataValueReferenceMx} from '@/api/DAtastandard.js'
const { chartRef,initChart, updateChart, setClickHandler } = useEcharts();
const props = defineProps(['wztext','xdata','flag']);
const visible = ref(false);
const getOption = () => ({
  backgroundColor: 'transparent',
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center', // 水平居中
        top: '40%', // 垂直位置与饼图中心对齐
        style: {
          text: props.flag ? props.xdata : props.xdata + '%',
          textAlign: 'center',
          fill: '#fff',
          font: 'bolder 12px Microsoft YaHei'
        }
      }
    ]
  },
  series: [
    {
      type: "pie",
      radius: ['50%', '40%'], // 设置环形饼图的内外半径
      center: ['50%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      hoverAnimation: false,
      data: [
        { value: props.xdata,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#01F1FE'
          }, {
            offset: 1,
            color: '#008BFF'
          }]),
            borderColor: 'transparent' // 标准符合的颜色
          } },
        { value: props.flag ? 0 : (100 - props.xdata),
          itemStyle: {
            opacity: 0,
          }}
      ]
    }
  ]
})
// 初始化图表
initChart(getOption());

// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [],
  };
  updateChart(newOption);
};
const handleChartClick = () => {
  if(props.flag) {
    visible.value = true
  }
}

watch(() => props.xdata, async (newVal) => {
  await nextTick();
  updateChart(getOption())
});

const page=ref({
  pageNumber:1,
  pageSize:10,
})

const pageNumber=ref(1)
const pageSize=ref(10)
const keyword=ref('')
const tableData=ref()

const receiveFromGrandchild = (e) => {
  console.log('收到数据:', e); 
  pageNumber.value=e
  getcountDataValueReferenceMx()
};

const receiveFromGrandchild1 = (e) => {
  console.log('收到数据:', e); 
  keyword.value=e
  getcountDataValueReferenceMx()
};
const receiveFromGrandchild2 = (e) => {
  console.log('收到数据:', e); 
  pageNumber.value=e.n
  keyword.value=e.k
  getcountDataValueReferenceMx()
};

provide('grandpaCallback', receiveFromGrandchild); 
provide('grandpaCallback1', receiveFromGrandchild1); 
provide('grandpaCallback2', receiveFromGrandchild2)

// 请求二级表格数据
const getcountDataValueReferenceMx=()=>{
  GETcountDataValueReferenceMx({pageNumber:pageNumber.value,pageSize:pageSize.value,keyword:keyword.value}).then(res=>{
       console.log('resww--------------------------------------------------',res);
       tableData.value=res?.data||{}
       tableData.value={...tableData.value,X:[{prop:'type',label:'数据标准类别'},{prop:'name',label:'字段名'},{prop:'nameZh',label:'字段中文'}]} 
       console.log('resqq----------------------------------',tableData.value);
       
       
  })
}

onMounted(() => {
  // 初始化图表
  initChart(getOption());
  setClickHandler(handleChartClick)
  getcountDataValueReferenceMx()
});
</script>

<style scoped lang="scss">
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../../../../static/BGscreenLeft/pie2.png");
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  .description {
    width: 100px;
    position: absolute;
    bottom: 0px; // 根据实际需求调整位置
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 12px;
  }
}
</style>